<template>
  <div class="profile-page">
    <!-- 顶部导航 -->
    <van-nav-bar title="个人中心" class="profile-nav" />

    <!-- 用户信息卡片 -->
    <div class="user-card">
      <div class="user-avatar">
        <van-image
          :src="userInfo?.avatar"
          round
          width="80"
          height="80"
          fit="cover"
        >
          <template v-slot:error>
            <van-icon name="user-circle-o" size="80" color="#c8c9cc" />
          </template>
        </van-image>
      </div>
      
      <div class="user-info">
        <h2 class="username">{{ userInfo?.username || '用户' }}</h2>
        <p class="user-desc">{{ userInfo?.email || '暂无邮箱' }}</p>
        <div class="user-stats">
          <div class="stat-item">
            <span class="stat-value">{{ loginDays }}</span>
            <span class="stat-label">登录天数</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ usageCount }}</span>
            <span class="stat-label">使用次数</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 功能菜单 -->
    <div class="menu-section">
      <van-cell-group>
        <van-cell
          title="个人信息"
          icon="user-o"
          is-link
          @click="showUserInfo"
        />
        <van-cell
          title="使用统计"
          icon="bar-chart-o"
          is-link
          @click="showStats"
        />
        <van-cell
          title="设置"
          icon="setting-o"
          is-link
          @click="showSettings"
        />
        <van-cell
          title="关于我们"
          icon="info-o"
          is-link
          @click="showAbout"
        />
      </van-cell-group>
    </div>

    <!-- 退出登录 -->
    <div class="logout-section">
      <van-button
        type="danger"
        size="large"
        round
        @click="handleLogout"
        :loading="logoutLoading"
      >
        退出登录
      </van-button>
    </div>

    <!-- 用户信息弹窗 -->
    <van-popup v-model:show="showUserInfoPopup" position="bottom" round>
      <div class="popup-content">
        <div class="popup-header">
          <h3>个人信息</h3>
          <van-icon name="cross" @click="showUserInfoPopup = false" />
        </div>
        
        <van-cell-group>
          <van-cell title="用户名" :value="userInfo?.username || '未设置'" />
          <van-cell title="邮箱" :value="userInfo?.email || '未设置'" />
          <van-cell title="手机号" :value="userInfo?.phone || '未设置'" />
          <van-cell title="注册时间" :value="formatDate(userInfo?.loginTime)" />
          <van-cell title="登录方式" :value="userInfo?.loginType || '人脸识别'" />
        </van-cell-group>
      </div>
    </van-popup>

    <!-- 使用统计弹窗 -->
    <van-popup v-model:show="showStatsPopup" position="bottom" round>
      <div class="popup-content">
        <div class="popup-header">
          <h3>使用统计</h3>
          <van-icon name="cross" @click="showStatsPopup = false" />
        </div>
        
        <div class="stats-content">
          <div class="stats-grid">
            <div class="stats-item">
              <div class="stats-value">{{ loginDays }}</div>
              <div class="stats-label">连续登录</div>
            </div>
            <div class="stats-item">
              <div class="stats-value">{{ usageCount }}</div>
              <div class="stats-label">总使用次数</div>
            </div>
            <div class="stats-item">
              <div class="stats-value">{{ searchCount }}</div>
              <div class="stats-label">搜题次数</div>
            </div>
            <div class="stats-item">
              <div class="stats-value">{{ chatCount }}</div>
              <div class="stats-label">对话次数</div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>

    <!-- 设置弹窗 -->
    <van-popup v-model:show="showSettingsPopup" position="bottom" round>
      <div class="popup-content">
        <div class="popup-header">
          <h3>设置</h3>
          <van-icon name="cross" @click="showSettingsPopup = false" />
        </div>
        
        <van-cell-group>
          <van-cell title="语音播报">
            <template #right-icon>
              <van-switch v-model="settings.voiceEnabled" />
            </template>
          </van-cell>
          <van-cell title="自动保存搜题记录">
            <template #right-icon>
              <van-switch v-model="settings.autoSave" />
            </template>
          </van-cell>
          <van-cell title="夜间模式">
            <template #right-icon>
              <van-switch v-model="settings.darkMode" />
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </van-popup>

    <!-- 关于我们弹窗 -->
    <van-popup v-model:show="showAboutPopup" position="bottom" round>
      <div class="popup-content">
        <div class="popup-header">
          <h3>关于我们</h3>
          <van-icon name="cross" @click="showAboutPopup = false" />
        </div>
        
        <div class="about-content">
          <div class="app-info">
            <van-icon name="chat" size="60" color="#1989fa" />
            <h4>AI智能学习助手</h4>
            <p>版本 1.0.0</p>
          </div>
          
          <div class="features-list">
            <div class="feature-item">
              <van-icon name="video-o" color="#67c23a" />
              <span>人脸识别登录</span>
            </div>
            <div class="feature-item">
              <van-icon name="search" color="#1989fa" />
              <span>智能拍照搜题</span>
            </div>
            <div class="feature-item">
              <van-icon name="chat-o" color="#e6a23c" />
              <span>AI智能对话</span>
            </div>
            <div class="feature-item">
              <van-icon name="description" color="#f56c6c" />
              <span>OCR文字识别</span>
            </div>
          </div>
          
          <p class="copyright">© 2024 AI智能学习助手</p>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showConfirmDialog } from 'vant'
import { getUserInfo, clearAuth } from '@/utils/auth'

const router = useRouter()

// 用户信息
const userInfo = computed(() => getUserInfo())

// 弹窗状态
const showUserInfoPopup = ref(false)
const showStatsPopup = ref(false)
const showSettingsPopup = ref(false)
const showAboutPopup = ref(false)
const logoutLoading = ref(false)

// 统计数据
const loginDays = ref(Math.floor(Math.random() * 30) + 1)
const usageCount = ref(Math.floor(Math.random() * 100) + 10)
const searchCount = ref(Math.floor(Math.random() * 50) + 5)
const chatCount = ref(Math.floor(Math.random() * 80) + 8)

// 设置
const settings = reactive({
  voiceEnabled: true,
  autoSave: true,
  darkMode: false
})

// 显示用户信息
const showUserInfo = () => {
  showUserInfoPopup.value = true
}

// 显示统计
const showStats = () => {
  showStatsPopup.value = true
}

// 显示设置
const showSettings = () => {
  showSettingsPopup.value = true
}

// 显示关于
const showAbout = () => {
  showAboutPopup.value = true
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '未知'
  return new Date(dateString).toLocaleDateString()
}

// 退出登录
const handleLogout = async () => {
  try {
    await showConfirmDialog({
      title: '确认退出',
      message: '确定要退出登录吗？',
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    })

    logoutLoading.value = true
    
    // 模拟退出登录延迟
    setTimeout(() => {
      clearAuth()
      showToast('已退出登录')
      router.push('/login')
      logoutLoading.value = false
    }, 1000)
  } catch (error) {
    // 用户取消
  }
}
</script>

<style scoped>
.profile-page {
  min-height: 100vh;
  background: #f7f8fa;
}

.profile-nav {
  background: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.user-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 30px 20px;
  color: white;
  text-align: center;
}

.user-avatar {
  margin-bottom: 16px;
}

.username {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
}

.user-desc {
  margin: 0 0 20px 0;
  opacity: 0.8;
  font-size: 14px;
}

.user-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  opacity: 0.8;
}

.menu-section {
  margin: 20px 16px;
}

.logout-section {
  padding: 20px 16px;
}

.popup-content {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebedf0;
}

.popup-header h3 {
  margin: 0;
  font-size: 18px;
  color: #323233;
}

.stats-content {
  padding: 20px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.stats-item {
  text-align: center;
  padding: 20px;
  background: #f7f8fa;
  border-radius: 12px;
}

.stats-value {
  display: block;
  font-size: 24px;
  font-weight: 600;
  color: #1989fa;
  margin-bottom: 8px;
}

.stats-label {
  font-size: 14px;
  color: #646566;
}

.about-content {
  text-align: center;
  padding: 20px 0;
}

.app-info {
  margin-bottom: 30px;
}

.app-info h4 {
  margin: 16px 0 8px 0;
  font-size: 20px;
  color: #323233;
}

.app-info p {
  margin: 0;
  color: #969799;
}

.features-list {
  margin-bottom: 30px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  font-size: 16px;
  color: #323233;
}

.copyright {
  color: #969799;
  font-size: 14px;
  margin: 0;
}
</style>
